<template>
  <div class="edit-popup">
      <popup
          ref="popupRef"
          :title="title"
          :async="true"
          width="550px"
          @confirm="handleSubmit"
          @close="handleClose"
      >
          <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
              <!-- 账号输入框 -->

              
              <el-form-item label="新密码" prop="password">
                    <el-input  type="password" v-model="formData.password"   placeholder="请输入新密码"  /> 
                </el-form-item>

                <!-- 名称输入框 -->
                <el-form-item label="再次输入" prop="newpassword">
                    <el-input  type="password"  v-model="formData.newpassword" placeholder="请再次输入新密码" />
                </el-form-item> 
            
              
          </el-form>
      </popup>
  </div>
</template>
<script setup>  
import Popup from '@/components/popup/index.vue' 
import { adminEdit } from '@/apis/system/admin'
import { useUserStore } from '@/stores/user'
import feedback from '@/utils/feedback'
const store = useUserStore()

const emit = defineEmits(['success', 'close'])
const formRef = ref(null)
const popupRef = ref(null) 
const formData = reactive({  
  id:'',
  password: '',  
  newpassword: '',
})

const title = ref('')

const formRules = reactive({
  password: [
      {
          required: true,
          message: '请输入新密码',
          trigger: ['blur']
      }
  ],
  newpassword: [
      {
          required: true,
          message: '请再次输入新密码',
          trigger: ['blur']
      }
  ],  
})
 
const handleSubmit = async () => {
  await formRef.value?.validate()  
  if(formData.password != formData.newpassword){
    feedback.msgError('两次输入密码不一致')
    return
  }
  adminEdit({
    id:formData.id,
    password:formData.password
  }).then(res=>{
    feedback.msgSuccess('修改成功')
    popupRef.value?.close() 
  })
}

const open = (data) => { 
  formData.id = data.id
  title.value = `修改${data.username}的密码`
  popupRef.value?.open()  
}

const handleClose = () => {
  emit('close')
}

defineExpose({
  open, 
})
</script>


<style scoped lang="scss">
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
 }
 .avatar-uploader :deep() .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader :deep() .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 20px !important;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>